<template>
  <div>
    <el-tabs v-model="activeNav" @tab-click="handleNavChange">
      <el-tab-pane v-for="(item,index) in nav" :name="item.name" :label="item.label" :key="item.name"></el-tab-pane>
    </el-tabs>
    <Elevator :list="nav.map(i=>i.name)" ref="ElevatorRef" byToName="className" scrollName="el-main" @showValue="showValue">
      <template v-for="(item,index) in nav" #[item.name]>
        <div style="height: 600px">{{ item.label }}</div>
      </template>
    </Elevator>
  </div>
</template>

<script>
import Elevator from '@localModules/ZhiXinLib/components/Elevator';

export default {
  name: 'ElevatorPage',
  components: { Elevator },
  data() {
    return {
      nav: [
        { name: 'itemBaseInfo', label: '基础信息' },
        { name: 'itemSort', label: '分类属性' },
        { name: 'itemSpec', label: 'SKU&价格' },
      ],
      activeNav: 'itemBaseInfo',
    };
  },
  methods: {
    showValue(val) {
      this.activeNav = val;
    },
    handleNavChange(val) {
      this.$refs.ElevatorRef.handleNavChange(val.name);
    },
  },
};
</script>

<style scoped lang="scss">
</style>
